<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>
        <input type="checkbox" value="" id="big">
        全选
        <button>反选</button>
    </div>

    <ul>
        <li><input type="checkbox" value="" class="small">张三</li>
        <li><input type="checkbox" value="" class="small">李四</li>
        <li><input type="checkbox" value="" class="small">麻子</li>
    </ul>

    <script>
        // 1.点击全选的checkbox，让下面所有人名前的checkbox的选中状态和全选的一致
        const big = document.querySelector('#big')
        const small = document.querySelectorAll('.small')
        big.addEventListener('click', function () {
            for (let i = 0; i < small.length; i++) {
                small[i].checked = big.checked
            }
        })

        // 2.点击反选按钮，所有人名前的checkbox的选中状态取反
        const btn = document.querySelector('button')
        let flag = true
        btn.addEventListener('click', function () {
            for (let i = 0; i < small.length; i++) {
                if (small[i].checked) {
                    small[i].checked = !flag
                }
                else {
                    small[i].checked = flag
                }


            }

        })

        // 3.点击所有人名前的checkbox，判断全选的选中状态
        for (let i = 0; i < small.length; i++) {
            small[i].addEventListener('click', function () {
                console.log();
                big.checked = document.querySelectorAll('.small:checked').length === small.length
                console.log(document.querySelectorAll('.small:checked').length);

            })
        }


    </script>
</body>

</html>